<template>
    <div class="topMenu">
        <div class="operateAreaCommon" v-if="isMainWindow">
            <div class="logo" @click="goLogin">
                <img src="../../../static/icons/logo.png" alt="" />
            </div>
            <div class="operateArea noDrag">
                <div class="operate_area_item" title="最小化" @click="setMin">
                    <i style="font-size:25px;color: #fff;" class="iconfont icon-zuixiaohua"></i>
                </div>
                <div class="operate_area_item" title="最大化" @click="setMax">
                    <i v-show="isMin" style="font-size:20px;color: #fff;font-weight: 600;" class="iconfont icon-24gl-rectangle"></i>
                    <i v-show="!isMin" style="font-size:20px;color: #fff;font-weight: 600;" class="iconfont icon-Icon_zuidahua-25"></i>
                </div>
                <div class="operate_area_item" title="关闭" @click="setQuit">
                    <i style="font-size:25px;color: #fff" class="iconfont icon-cuowuguanbiquxiao"></i>
                </div>
            </div>
        </div>
        <div class="operateAreaCommon" v-else-if="isOtherWindow">
            <div class="logo">
                <!-- <img src="../../../static/icons/logo.png" alt="" /> -->
            </div>
            <div class="operateArea noDrag">
                <div class="operate_area_item" title="用默认浏览器打开" @click="browserOpen">
                    <i style="font-size:20px;color: #000;" class="iconfont icon-browser-o"></i>
                </div>
                <div class="operate_area_item" title="最小化" @click="setMin">
                    <i style="font-size:25px;color: #000;" class="iconfont icon-zuixiaohua"></i>
                </div>
                <div class="operate_area_item" title="最大化" @click="setMax">
                    <i v-show="isMin" style="font-size:20px;color: #000;font-weight: 600;" class="iconfont icon-24gl-rectangle"></i>
                    <i v-show="!isMin" style="font-size:20px;color: #000;font-weight: 600;" class="iconfont icon-Icon_zuidahua-25"></i>
                </div>
                <div class="operate_area_item" title="关闭" @click="setQuit">
                    <i style="font-size:25px;color: #000" class="iconfont icon-cuowuguanbiquxiao"></i>
                </div>
            </div>
        </div>
        <div class="operateAreaLogin" v-else-if="isLogin">
            <div class="operate_area" title="最小化" @click="setMin">
                <i style="font-size:25px;color:#000" class="iconfont icon-zuixiaohua"></i>
            </div>
            <div class="operate_area close" title="关闭" @click="setQuit">
                <i style="font-size:25px;color:#000" class="iconfont icon-cuowuguanbiquxiao"></i>
            </div>
        </div>
    </div>
</template>

<script>
const { shell } = window.require('electron');
export default {
    name: 'topMenu',
    props: {
        isLogin: {
            type: Boolean,
            default: false
        },
        isOtherWindow:{
            type: Boolean,
            default: false
        },
        isMainWindow:{
            type: Boolean,
            default: false
        }
    },
    components: {},
    data() {
        return {
            isMin: true,
        }
    },
    computed: {},
    watch: {},
    methods: {
        browserOpen(){
            let url = 'https://www.baidu.com/'
            shell.openExternal(url);
        },
        goLogin() {
            this.$router.push({ path: '/' })
        },
        setMin() {
            window.myIpcRenderer.send("window-mini", window.myRemote.getCurrentWindow().id)
        },
        setMax() {
            window.myIpcRenderer.send("window-max", window.myRemote.getCurrentWindow().id)
        },
        setQuit() {
            window.myIpcRenderer.send("window-closed", window.myRemote.getCurrentWindow().id)
        }
    },
    beforeCreate() {
    },
    created() {
    },
    beforeMount() {
    },
    mounted() {
        window.myIpcRenderer.on('message-from-main', (event, message) => {
            // 处理接收到的消息
            this.isMin = message
        });
    },
    beforeUpdate() {
    },
    updated() {
    },
    activated() {
    },
    deactivated() {
    },
    beforeDestroy() {
    },
    destroyed() {
    }
}
</script> 
<style scoped lang='less'>
.topMenu {
    .operateAreaCommon {
        height: 100%;
        display: flex;
        padding: 0 5px;
        justify-content: space-between;
        align-items: center;
        -webkit-app-region: drag;
        .logo {
            // padding: 10px 0 0 10px;
            -webkit-app-region: no-drag;
            width: 40px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 40px;
                height: 40px;
            }
        }

        .operateArea {
            user-select: none;
            display: flex;
            align-items: center;

            .operate_area_item {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                margin-left: 15px;
                cursor: pointer;

                img {
                    width: 80%;
                    height: 80%;
                }

                &:hover {
                    background: rgba(255, 255, 255, 0.3);
                    border-radius: 4px;
                }
            }
        }

        .noDrag {
            -webkit-app-region: no-drag;
        }
    }
    .operateAreaLogin {
        -webkit-app-region: no-drag;
        user-select: none;
        padding-right: 10px;
        display: flex;
        align-items: center;

        .operate_area {
            width: 25px;
            height: 25px;
            margin-left: 15px;
            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
            }

            &:hover {
                background: rgba(0, 0, 0, 0.1);
                border-radius: 4px;
            }
        }

        .close {
            &:hover {
                background: rgba(238, 6, 6, 0.1) !important;
                color: red !important;
            }
        }
    }
}</style>
